<template>
	<view class="box">
		<view class="list-cell-user">
			<view class="user">
				<view class="left-content">
					<image class="avatar" :src="detail.avatar" mode="aspectFill"
						style="height: 70rpx;width: 70rpx;border-radius: 10rpx;margin-right: 10rpx;"></image>
					<view class="name">{{detail.username}}</view>
					<view class="addFriend" v-if="!detail.friendFlag" @click="addFriend">添加好友</view>
				</view>
				<view class="time">{{detail.time}}</view>
			</view>


			<view class="title">
				{{detail.title}}
			</view>
			<view class="content">
				{{detail.content}}
			</view>
			<view class="_image" v-for="(item,index) in detail.images">
				<image :src="item.image" mode="aspectFit"></image>
			</view>
		</view>
		<view class="list-cell-comment" v-for="(item,index) in detail.commentList">
			<view class="user">
				<image class="avatar" :src="item.avatar" mode="aspectFill"
					style="height: 70rpx;width: 70rpx;border-radius: 10rpx;margin:0 35rpx 0 0;">
				</image>
				<view class="name">
					{{item.username}}
				</view>
				<view class="time">
					{{item.time}}
				</view>
			</view>

			<view class="content">
				{{item.content}}
			</view>
		</view>

		<!-- 输入 -->
		<view class="message" :class="{ 'keyboard-open': keyboardOpenClass === 'keyboard-open' }">
			<uni-easyinput type="text" cursor-spacing="20" placeholder="请输入聊天内容…" v-model="inputValue"
				@focus="handleInputFocus" @blur="handleInputBlur"></uni-easyinput>
			<image :src="selectedImageSrc" style="width: 80rpx; height: 80rpx ;margin-left: 30rpx;" mode="aspectFill"
				@click="sendComment">
			</image>
		</view>

	</view>
</template>

<script>
	import {
		getOnePost,
		getUserId
	} from "@/api/post";

	import {
		addUserFriend
	} from "@/api/friend";

	import {
		addMessage
	} from "@/api/message";

	import {
		insertComment
	} from "@/api/comment";

	export default {
		data() {
			return {
				// 内容主体
				detail: {
					id: 0,
					// 用于后续加好友
					userId: 0,
					avatar: '',
					username: '',
					title: '',
					content: '',
					images: [],
					time: '',
					friendFlag: false, // 两者是不是好友的flag

					commentList: []
				},
				// 输入的内容
				inputValue: "",
				// 输入框
				focusInput: false,
				height: '',
				isInput: false,
				// postId
				postId: 0,
				userId: 1,

				selectedImageSrc: "/static/img/healthPage/voice.png",
				imageSrc: ["/static/img/healthPage/voice.png", "/static/img/healthPage/send.png"],

			};
		},
		onLoad(option) {
			this.storeUserId()
			// 获取post详细信息（包括评论）
			this.postId = Number(option.postId)
			this.getPostDetail(this.postId)
		},
		
		// 使用watch监听inputValue的变化
		watch: {
			inputValue(newVal) {
				if (newVal !== '') {
					this.selectedImageSrc = this.imageSrc[1]; // 当输入框内容不为空时，切换图片路径
				} else {
					this.selectedImageSrc = this.imageSrc[0]; // 当输入框内容为空时，恢复初始图片路径
				}
			},
		},
		methods: {
			storeUserId(){
				getUserId().then(response => {
					// console.log(response.data.userId);
					this.userId = response.data.userId
				})
			},
			
			// 获取post详细信息（包括评论、所有头像的url）
			getPostDetail(id) {
				this.loading = true
				getOnePost(id).then(response => {
					console.log(response.data);
					// 所有信息进行赋值
					this.detail = response.data
					if(this.detail.userId == this.userId){
						// 自己不和自己添加好友
						this.detail.friendFlag = true
					}
					console.log(this.detail);
					// this.contentList = response.data
					this.loading = false
				})
			},

			// 发送评论（添加到评论中）
			sendComment() {
				this.loading = true

				// 存msg数据库的参数
				var commentMsg = {
					msgType: 1, // 1表示存入的是评论信息
					userId: this.detail.userId, // 存到接收方的userId中
					postId: this.postId,
					content: this.inputValue,
					time: new Date().getTime()
				}
				// 添加消息信息和comment(msg用到插入comment后的comment_id)
				addMessage(commentMsg).then(response => {
					console.log(response);
					// 提示发布成功
					this.$modal.msgSuccess("发布成功");
					// 清空输入框
					this.inputValue = "";
					// 刷新当前页面，加载评论后的数据
					this.getPostDetail(this.postId)
					this.loading = false
				})
			},

			// 添加好友
			addFriend() {
				this.loading = true
				// 弹窗提示
				var that = this
				wx.showModal({
					content: '是否添加好友',
					success(res) {
						// 用户点击确定
						if (res.confirm) {
							// console.log('用户点击确定')

							// 存好友请求的参数
							var friendMsg = {
								msgType: 0, // 0表示存入的是好友请求
								userId: that.detail.userId, // 存到接收方的userId中
								time: new Date().getTime()
							}
							// 发送加好友请求，存入数据库中
							addMessage(friendMsg).then(response => {
								console.log(response);
								this.loading = false
							})


						} else if (res.cancel) {
							// console.log('用户点击取消')
						}
					}
				})
			},

			handleInputFocus() {
				this.keyboardHeight = 300; // 假设值
				this.$nextTick(() => this.adjustMessagePosition());
			},
			handleInputBlur() {
				this.keyboardHeight = 0;
				this.$nextTick(() => this.adjustMessagePosition());
			},
			adjustMessagePosition() {
				if (this.keyboardHeight > 0) {
					this.keyboardOpenClass = 'keyboard-open';
				} else {
					this.keyboardOpenClass = '';
				}
			}
		}
	}
</script>

<style lang="scss">
	.box {

		// 论坛主体
		.list-cell-user {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 10rpx 24rpx;
			overflow: hidden;
			color: #323233;
			line-height: 24rpx;
			background-color: #fff;
			flex-direction: column;
			margin: 15rpx 0;

			min-height: 0;
			flex-grow: 1;
			flex-shrink: 1;
			flex-basis: auto;

			.user {
				display: flex;
				justify-content: space-between;
				width: 100%;

				.left-content {
					display: flex;
					align-items: center;

					.avatar {
						height: 70rpx;
						width: 70rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

					.name {
						flex: 1;
						font-size: 50rpx;
						font-weight: 500;
						margin: 0 10rpx;
					}

					.addFriend {
						height: 100%;
						width: 200rpx;
						margin: 0 10rpx;
						border-radius: 20rpx;
						font-size: 45rpx;
						font-weight: 500;
						color: white;
						background-color: seagreen;

						display: flex;
						align-items: center;
						justify-content: center;
						text-align: center;
					}
				}

				.time {
					text-align: right;
					margin-top: 5rpx;
					color: gray;
				}
			}

			.title {
				width: 100%;
				flex: 1;
				text-align: left;
				font-size: 50rpx;
				font-weight: 600;
				margin: 30rpx 0;
				padding: 0;
			}

			.content {
				width: 100%;
				flex: 1;
				text-align: left;
				margin: 30rpx 0;
				padding: 0;

				font-size: 40rpx;
				// 换行
				line-height: 1.5;
			}

			._image {
				margin: 20rpx 0;
			}
		}

		// 评论主体
		.list-cell-comment {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			width: 100%;
			padding: 10rpx 24rpx;
			overflow: hidden;
			color: #323233;
			font-size: rpx;
			line-height: 24rpx;
			background-color: #F7F7F9;
			flex-direction: column;
			margin: 15rpx 0;

			.user {
				display: flex;
				align-items: center;
				width: 100%;

				.avatar {
					height: 70rpx;
					width: 70rpx;
					border-radius: 10rpx;
					margin-right: 35rpx;
				}

				.name {
					flex: 1;
					margin-left: 10rpx;
					font-size: 40rpx;
					font-weight: 500;
				}

				.time {
					text-align: right;
					margin-top: 5rpx;
					color: gray;
				}
			}

			.content {
				width: 100%;
				flex: 1;
				text-align: left;
				margin: 30rpx 0;
				padding: 0;
			}
		}


		.commentInputView {
			width: 100%;
			height: 100rpx;
			background-color: rgba(204, 204, 204, 0.61);
			padding: 4%;
			position: fixed;
			display: flex;
			justify-content: space-between;
		}

		.commentInput {
			width: 70%;
			background-color: #fff;
			font-size: 28rpx;
			border-radius: 15rpx;
			display: flex;
			align-items: center;
		}

		.input {
			width: 100%;
			padding: 15rpx;
			font-size: 30rpx;
			margin: 0 auto;
			overflow: hidden;
			line-height-step: 20rpx;
			border: 0;
		}

		.send {
			width: 20%;
			height: 80rpx;
			color: #fff;
			font-size: 34rpx;
			background-color: green;
			border: 0;
		}

		.message {
			width: 100%;
			height: 100rpx;
			position: fixed;
			background-color: #fff;
			bottom: 0;
			left: 50%;

			transform: translateX(-50%);
			border-top: 2rpx solid #eee;
			border-radius: 15rpx;
			box-sizing: border-box;
			z-index: 3;

			display: flex;
			align-items: center;
			justify-content: space-between;

			.uni-easyinput.input {
				height: 50rpx;
				flex-grow: 1;
			}
		}
	}
</style>